<!--相册编辑-->
<template>
    <f7-page no-navbar style="background-color: #f4f5f5;">

        <!--照片相册-->
        <f7-photo-browser
                :photos="photos"
                theme="dark"
                ref="standaloneDark"
        ></f7-photo-browser>
        <!---->
        <f7-row class="margin-top" v-for="(item, indexCol) in 9" :key="indexCol">
            <f7-col style="width:33.33%" v-for="(item, indexRow) in 3" :key="indexRow">
                <div class="" style="text-align: center;">
                        <div>
                            <div>
                                <img :class="isSelectCp"
                                     @click="$refs.standaloneDark.open()"
                                     src="https://cdn.framework7.io/placeholder/people-160x160-1.jpg" width="90%" />
                            </div>
                            <span><f7-checkbox :name="'checkbox'+indexCol*indexRow" @change="changeImg(5)"></f7-checkbox></span>
                        </div>
                </div>
            </f7-col>

        </f7-row>


        <f7-toolbar bottom style="text-align: center;">
            <f7-button style="color: white;margin-left: 5%;width: 25%;" class="col button button-fill button-round">新增</f7-button>
            <f7-button   target="_blank" text="设为头像"></f7-button>
            <f7-button style="color: white;margin-right:5%;width: 25%;" class="col button button-fill button-round color-pink">删除</f7-button>
        </f7-toolbar>
    </f7-page>

</template>
<script>
    export default {
        computed: {
            // 计算属性的 getter
            isSelectCp: function () {
                if(this.isSelect){
                    return "photo-img-select";
                }else{
                    return "photo-img";
                }
            }
        },
        data() {
            return {
                isSelect:false,
                timeOutEvent:0,
                photos: [
                    {
                        url: 'img/beach.jpg',
                        caption: 'Amazing beach in Goa, India',
                    },
                    'http://placekitten.com/1024/1024',
                    'img/lock.jpg',
                    {
                        url: 'img/monkey.jpg',
                        caption: 'I met this monkey in Chinese mountains',
                    },
                    {
                        url: 'img/mountains.jpg',
                        caption: 'Beautiful mountains in Zhangjiajie, China',
                    },
                ],
            };
        },
        methods:{
            changeImg(index){
                console.log(index);
                this.isSelect=true;
                console.log(this.isSelect);
            }
        },

        created() {
            // $refs.standaloneDark.open(3);
        }
    }
</script>
<style scoped>
    .photo-img {
        border: 3px solid white;
    }
    .photo-img-select {
        border: 2px solid #007aff;
    }
</style>

